<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>HTML介绍 | 个人笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-expandable-chapters-interactive/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../md/css/CSS笔记.html" />
    
    
    <link rel="prev" href="../../index.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="1"
        data-chapter-title="HTML介绍"
        data-filepath="md/html/HTML5.md"
        data-basepath="../.."
        data-revision="Fri Sep 14 2018 16:41:08 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="1" data-path="md/html/HTML5.html">
            
                
                    <a href="../../md/html/HTML5.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        HTML介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2" data-path="md/css/CSS笔记.html">
            
                
                    <a href="../../md/css/CSS笔记.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        css笔记
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3" data-path="md/js/js基础.html">
            
                
                    <a href="../../md/js/js基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="md/js/js数据类型的转换.html">
            
                
                    <a href="../../md/js/js数据类型的转换.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="md/js/js运算符.html">
            
                
                    <a href="../../md/js/js运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        运算符
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.2.1" data-path="md/js/js赋值运算符.html">
            
                
                    <a href="../../md/js/js赋值运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.1.</b>
                        
                        赋值运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.2" data-path="md/js/js比较运算符.html">
            
                
                    <a href="../../md/js/js比较运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.2.</b>
                        
                        比较运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.3" data-path="md/js/js逻辑操作符.html">
            
                
                    <a href="../../md/js/js逻辑操作符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.3.</b>
                        
                        逻辑操作符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.4" data-path="md/js/js条件运算符.html">
            
                
                    <a href="../../md/js/js条件运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.4.</b>
                        
                        条件运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.5" data-path="md/js/js位运算符.html">
            
                
                    <a href="../../md/js/js位运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.5.</b>
                        
                        位运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.6" data-path="md/js/js条件语句.html">
            
                
                    <a href="../../md/js/js条件语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.6.</b>
                        
                        条件语句
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="md/js/js循环.html">
            
                
                    <a href="../../md/js/js循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        循环
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.3.1" data-path="md/js/jswhile循环.html">
            
                
                    <a href="../../md/js/jswhile循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.1.</b>
                        
                        while循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3.2" data-path="md/js/jsfor循环.html">
            
                
                    <a href="../../md/js/jsfor循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.2.</b>
                        
                        for循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3.3" data-path="md/js/js多层循环.html">
            
                
                    <a href="../../md/js/js多层循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.3.</b>
                        
                        多层循环
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="md/js/js函数.html">
            
                
                    <a href="../../md/js/js函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="md/js/js冒泡排序.html">
            
                
                    <a href="../../md/js/js冒泡排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        冒泡排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="md/js/try-catch语句.html">
            
                
                    <a href="../../md/js/try-catch语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        try-catch语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="md/js/jses6.html">
            
                
                    <a href="../../md/js/jses6.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        es6
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.7.1" data-path="md/js/安装babel.html">
            
                
                    <a href="../../md/js/安装babel.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.1.</b>
                        
                        安装babel(es6转es5)
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.8" data-path="md/js/js数组对象.html">
            
                
                    <a href="../../md/js/js数组对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.8.</b>
                        
                        数组对象
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" data-path="md/js/js笔记.html">
            
                
                    <a href="../../md/js/js笔记.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        js大佬de笔记
                    </a>
            
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >个人笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h3 id="html5&#x7684;&#x7B80;&#x5355;&#x4ECB;&#x7ECD;">HTML5&#x7684;&#x7B80;&#x5355;&#x4ECB;&#x7ECD;</h3>
<p>&#x7B80;&#x5355;&#x6765;&#x8BF4;&#x5C31;&#x662F;&#x8D85;&#x6587;&#x672C;&#x6807;&#x8BB0;&#x8BED;&#x8A00;&#xFF08;HTML&#xFF09;&#x7684;&#x7B2C;&#x4E94;&#x6B21;&#x91CD;&#x5927;&#x4FEE;&#x6539;&#x3002; HTML5&#x7684;&#x8BBE;&#x8BA1;&#x76EE;&#x7684;&#x662F;&#x4E3A;&#x4E86;&#x5728;&#x79FB;&#x52A8;&#x8BBE;&#x5907;&#x4E0A;&#x652F;&#x6301;&#x591A;&#x5A92;&#x4F53;&#x3002;</p>
<h4 id="html5&#x7684;&#x89C4;&#x8303;&#x4E66;&#x5199;">HTML5&#x7684;&#x89C4;&#x8303;&#x4E66;&#x5199;</h4>
<pre><code class="lang-html"><span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">&quot;utf-8&quot;</span> /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span>
</code></pre>
<h3 id="&#x7B2C;&#x4E00;&#x8282;-&#x5E38;&#x7528;&#x6807;&#x7B7E;">&#x7B2C;&#x4E00;&#x8282; &#x5E38;&#x7528;&#x6807;&#x7B7E;</h3>
<h4 id="1&#x6807;&#x7B7E;">1.&#x6807;&#x7B7E;</h4>
<h5 id="&#x6807;&#x7B7E;&#x6309;&#x7167;&#x7279;&#x6027;&#x53EF;&#x4EE5;&#x5206;&#x4E3A;&#xFF1A;&#xFF08;&#x91CD;&#x70B9;&#xFF09;">&#x6807;&#x7B7E;&#x6309;&#x7167;&#x7279;&#x6027;&#x53EF;&#x4EE5;&#x5206;&#x4E3A;&#xFF1A;&#xFF08;&#x91CD;&#x70B9;&#xFF09;</h5>
<ul>
<li>&#x884C;&#x5185;&#x6807;&#x7B7E;&#xFF1A;&#x5360;&#x81EA;&#x8EAB;&#x5185;&#x5BB9;&#x5927;&#x5C0F;&#x7684;&#x4F4D;&#x7F6E;</li>
<li>&#x5757;&#x7EA7;&#x6807;&#x7B7E;&#xFF1A;&#x603B;&#x662F;&#x5360;&#x6EE1;&#x6574;&#x884C;&#xFF08;&#x7236;&#x7EA7;&#x7684;&#x6574;&#x884C;&#xFF09;</li>
<li>&#x884C;&#x5185;&#x5757;&#x7EA7;&#x6807;&#x7B7E;&#xFF1A;&#x5982;img&#xFF0C;&#x5B83;&#x65E2;&#x5177;&#x6709;&#x5757;&#x7EA7;&#x6807;&#x7B7E;&#x7684;&#x5927;&#x5C0F;&#x8BBE;&#x5B9A;&#xFF0C;&#x53C8;&#x6709;&#x4F55;&#x5176;&#x4ED6;&#x975E;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4FDD;&#x6301;&#x540C;&#x4E00;&#x884C;&#x7684;&#x5C5E;&#x6027;</li>
</ul>
<h5 id="2html5&#x6587;&#x6863;&#x58F0;&#x660E;">2.HTML5&#x6587;&#x6863;&#x58F0;&#x660E;</h5>
<h6 id="1&#x58F0;&#x660E;&#x5934;">1.&#x58F0;&#x660E;&#x5934;</h6>
<pre><code>&lt;!DOCTYPE HTML&gt; 
</code></pre><p>&#x8BF4;&#x660E;&#xFF1A;<br>&#x4F4D;&#x4E8E;&#x6807;&#x7B7E;&#x4E4B;&#x524D;&#xFF0C;&#x4E0D;&#x533A;&#x5206;&#x5927;&#x5C0F;&#x5199;&#x3002;&#x544A;&#x77E5;&#x6D4F;&#x89C8;&#x5668;&#x8BE5;&#x6587;&#x6863;&#x9075;&#x5FAA;HTML&#x89C4;&#x8303;&#x3002;</p>
<h6 id="2&#x8BBE;&#x7F6E;&#x9875;&#x9762;&#x6807;&#x9898;">2.&#x8BBE;&#x7F6E;&#x9875;&#x9762;&#x6807;&#x9898;</h6>
<pre><code>&lt;title&gt;&#x6807;&#x9898;&lt;/title&gt;
</code></pre><h6 id="3&#x8BBE;&#x7F6E;&#x9875;&#x9762;&#x7F16;&#x7801;">3.&#x8BBE;&#x7F6E;&#x9875;&#x9762;&#x7F16;&#x7801;</h6>
<p>&#x8BF4;&#x660E;&#xFF1A;</p>
<blockquote>
<p>utf-8 &#x591A;&#x56FD;&#x8BED;&#x8A00;&#x7F16;&#x7801;<br>gb2312    &#x4E2D;&#x6587;&#x7B80;&#x4F53;&#x7F16;&#x7801;          </p>
</blockquote>
<h4 id="html&#x5E38;&#x7528;&#x5143;&#x7D20;">HTML&#x5E38;&#x7528;&#x5143;&#x7D20;</h4>
<h5 id="11-&#x6362;&#x884C;&#x7B26;">1.1 &#x6362;&#x884C;&#x7B26;</h5>
<pre><code>&lt;br&gt;
</code></pre><h5 id="12-&#x6BB5;&#x843D;">1.2 &#x6BB5;&#x843D;</h5>
<pre><code>&lt;p&gt;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x6BB5;&#x843D;&#x6807;&#x7B7E;&lt;/p&gt;
&lt;!--
&#x5C5E;&#x6027;&#xFF1A;
     align=&quot;left/right/center&quot;(&#x5411;&#x5DE6;&#x5BF9;&#x9F50;/&#x5411;&#x53F3;&#x5BF9;&#x9F50;/&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;)
--&gt;
</code></pre><h5 id="13-&#x6807;&#x9898;">1.3 &#x6807;&#x9898;</h5>
<pre><code class="lang-HTML"><span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>hello 013&#x56E2;&#x961F;<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h2</span>&gt;</span>hello 013&#x56E2;&#x961F;<span class="hljs-tag">&lt;/<span class="hljs-title">h2</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h3</span>&gt;</span>hello 013&#x56E2;&#x961F;<span class="hljs-tag">&lt;/<span class="hljs-title">h3</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>hello 013&#x56E2;&#x961F;<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h5</span>&gt;</span>hello 013&#x56E2;&#x961F;<span class="hljs-tag">&lt;/<span class="hljs-title">h5</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h6</span>&gt;</span>hello 013&#x56E2;&#x961F;<span class="hljs-tag">&lt;/<span class="hljs-title">h6</span>&gt;</span>
</code></pre>
<h3 id="&#x7B2C;&#x4E8C;&#x8282;&#x56FE;&#x7247;&#x3001;&#x5217;&#x8868;&#x3001;&#x8868;&#x683C;">&#x7B2C;&#x4E8C;&#x8282;&#x56FE;&#x7247;&#x3001;&#x5217;&#x8868;&#x3001;&#x8868;&#x683C;</h3>
<h4 id="21-a&#x6807;&#x7B7E;">2.1 a&#x6807;&#x7B7E;</h4>
<pre><code>&lt;a href=&#x201C;URL&#x201D;&gt; ~ &lt;/a&gt;  
&lt;!--
&#x5C5E;&#x6027;&#xFF1A;
 href&#x5C5E;&#x6027;&#xFF1A;&#x6307;&#x5B9A;&#x4E86;&#x70B9;&#x51FB;&#x8D85;&#x94FE;&#x63A5;&#x6587;&#x5B57;&#x6240;&#x8981;&#x8DF3;&#x8F6C;&#x7684;&#x9875;&#x9762;
target&#x5C5E;&#x6027;&#xFF1A;&#x6307;&#x5B9A;&#x4E86;&#x65B0;&#x6587;&#x4EF6;&#x6253;&#x5F00;&#x76EE;&#x6807;&#x4F4D;&#x7F6E;(_blank &#x65B0;&#x7684;&#x7A7A;&#x767D;&#x9875;,_self  &#x5F53;&#x524D;&#x9875;,_top)
title&#x5C5E;&#x6027;&#xFF1A;&#x9F20;&#x6807;&#x60AC;&#x505C;&#x4E0A;&#x9762;&#x7684;&#x63D0;&#x793A;&#x8BED;&#x53E5;
&#x5E38;&#x89C4;&#x5E94;&#x7528;&#xFF1A;
&lt;a href=&#x201C;http://www.baidu.com&#x201D;&gt;&#x5916;&#x90E8;&#x94FE;&#x63A5;&lt;/a&gt;
&lt;a href=&#x201C;my_word.html&#x201D;&gt;&#x5185;&#x90E8;&#x94FE;&#x63A5; &lt;/a&gt;
href&#x94FE;&#x63A5;&#x7684;&#x5730;&#x5740;&#x53EF;&#x4EE5;&#x662F;&#x7EDD;&#x5BF9;&#x5730;&#x5740;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;&#x76F8;&#x5BF9;&#x5730;&#x5740;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;&#x9875;&#x9762;&#x6587;&#x6863;&#x7684;&#x67D0;&#x4E2A;&#x90E8;&#x5206;

&#x7EDD;&#x5BF9;&#x5730;&#x5740;
&lt;a href=&#x201C;http://www.baidu.com&#x201D;&gt;&#x5916;&#x90E8;&#x94FE;&#x63A5;&lt;/a&gt;

&#x76F8;&#x5BF9;&#x5730;&#x5740;
&lt;a href=&#x201C;my_word.html&#x201D;&gt;&#x5185;&#x90E8;&#x94FE;&#x63A5; &lt;/a&gt;

&#x951A;&#x70B9;:&#x8DF3;&#x8F6C;&#x5230;&#x9875;&#x9762;&#x6587;&#x6863;&#x7684;&#x67D0;&#x4E2A;&#x90E8;&#x5206;
&lt;a href=&#x201C;#bgg&#x201D;&gt;&#x5185;&#x90E8;&#x94FE;&#x63A5; &lt;/a&gt;
&lt;a name=&#x201C;bgg&#x201D;&gt;&#x5185;&#x90E8;&#x94FE;&#x63A5; &lt;/a&gt;&#x6216;&#x8005;&lt;a id=&#x201C;bgg&#x201D;&gt;&#x5185;&#x90E8;&#x94FE;&#x63A5; &lt;/a&gt;
&#x6CE8;&#x610F;id&#x662F;&#x552F;&#x4E00;&#x7684;&#x3002;
--&gt;
&lt;a href=&quot;maito:&#x90AE;&#x7BB1;&#x53F7;&#x7801;&quot;&gt;&#x6253;&#x5F00;&#x90AE;&#x7BB1;&lt;/a&gt;
&lt;a href=&quot;tel:&#x624B;&#x673A;&#x53F7;&#x7801;&quot;&gt;&#x62E8;&#x6253;&#x53F7;&#x7801;&lt;/a&gt;
</code></pre><h4 id="22-&#x56FE;&#x7247;">2.2 &#x56FE;&#x7247;</h4>
<h5 id="img">img</h5>
<pre><code class="lang-HTML"><span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../img/test/1.gif&quot;</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">&quot;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x7F8E;&#x5973;&quot;</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">&quot;300&quot;</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">&quot;400&quot;</span> /&gt;</span>
    <span class="hljs-comment">&lt;!--
                img 
                src:&#xFF08;source&#xFF09;&#x6307;&#x5411;&#x8981;&#x663E;&#x793A;&#x7684;&#x56FE;&#x7247;&#x8DEF;&#x5F84;
                alt&#xFF1A;&#x5F53;&#x56FE;&#x7247;&#x663E;&#x793A;&#x5931;&#x8D25;&#x65F6;&#x624D;&#x4F1A;&#x663E;&#x793A;
                   HTML&#x91CC;&#x9762;&#x8DEF;&#x5F84;&#x5C55;&#x793A;&#x65B9;&#x5F0F;
                                     &#x4E00;&#x3001;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;ralativePath
                             ../ &#x8868;&#x793A;&#x51FA;&#x6765;&#x4E00;&#x5C42;&#x6587;&#x4EF6;&#x5939;
                              ./ &#x8868;&#x793A;&#x5F53;&#x524D;&#x6587;&#x4EF6;&#x5939;&#x4E0B;&#x9762;
                             name/ &#x8868;&#x793A;&#x8FDB;&#x5165;&#x3011;name&#x6587;&#x4EF6;&#x5939;&#x91CC;&#x9762;
                                    &#x4E8C;&#x3001;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#xFF1A;&#x8868;&#x793A;&#x7684;&#x662F;&#x8DEF;&#x5F84;&#x5B8C;&#x6574;&#x7684;&#x4FE1;&#x606F;
            --&gt;</span>
</code></pre>
<h4 id="23-&#x5217;&#x8868;">2.3 &#x5217;&#x8868;</h4>
<h5 id="i&#x6709;&#x5E8F;&#x5217;&#x8868;">I.&#x6709;&#x5E8F;&#x5217;&#x8868;</h5>
<pre><code class="lang-html">    <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>&#x5370;&#x5EA6;&#x64A4;&#x79BB;&#x4E2D;&#x56FD;&#x8FB9;&#x754C;<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>&#x5370;&#x5EA6;&#x64A4;&#x79BB;&#x4E2D;&#x56FD;&#x8FB9;&#x754C;<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>&#x5370;&#x5EA6;&#x64A4;&#x79BB;&#x4E2D;&#x56FD;&#x8FB9;&#x754C;<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>

<span class="hljs-comment">&lt;!--
       &#x5C5E;&#x6027; type:
                  disc&#x4E3A;&#x5B9E;&#x5FC3;&#x5706;(&#x9ED8;&#x8BA4;)
                  circle&#x4E3A;&#x7A7A;&#x5FC3;&#x5706;
                  square&#x4E3A;&#x5B9E;&#x5FC3;&#x77E9;&#x5F62;

        &#x53BB;&#x6389;&#x5706;&#x70B9;          list-style: none;
            --&gt;</span>
</code></pre>
<h5 id="ii&#x65E0;&#x5E8F;&#x5217;&#x8868;">II.&#x65E0;&#x5E8F;&#x5217;&#x8868;</h5>
<pre><code class="lang-html">    <span class="hljs-tag">&lt;<span class="hljs-title">ol</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>&#x5370;&#x5EA6;&#x64A4;&#x79BB;&#x4E2D;&#x56FD;&#x8FB9;&#x754C;<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>&#x5370;&#x5EA6;&#x64A4;&#x79BB;&#x4E2D;&#x56FD;&#x8FB9;&#x754C;<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>&#x5370;&#x5EA6;&#x64A4;&#x79BB;&#x4E2D;&#x56FD;&#x8FB9;&#x754C;<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">ol</span>&gt;</span>
<span class="hljs-comment">&lt;!--
       &#x5C5E;&#x6027; type:
                1:&#x6570;&#x5B57;&#x663E;&#x793A;(&#x9ED8;&#x8BA4;) 
                a:&#x5B57;&#x6BCD;&#x663E;&#x793A;
                i:&#x5C0F;&#x5199;&#x7F57;&#x9A6C;&#x6570;&#x5B57;&#x663E;&#x793A;
                I:&#x5927;&#x5199;&#x7F57;&#x9A6C;&#x6570;&#x5B57;&#x663E;&#x793A;
                start:&#x6570;&#x5B57;&#x663E;&#x793A;,&#x81EA;&#x5DF1;&#x786E;&#x5B9A;&#x5F00;&#x59CB;&#x6570;&#x5B57;
            --&gt;</span>
</code></pre>
<h5 id="iii&#x81EA;&#x5B9A;&#x4E49;&#x5217;&#x8868;">III.&#x81EA;&#x5B9A;&#x4E49;&#x5217;&#x8868;</h5>
<pre><code class="lang-html">    <span class="hljs-tag">&lt;<span class="hljs-title">dl</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">dt</span>&gt;</span>&#x8FD9;&#x662F;&#x4EC0;&#x4E48;<span class="hljs-tag">&lt;/<span class="hljs-title">dt</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">dd</span>&gt;</span>&#x539F;&#x6765;&#x662F;&#x8FD9;&#x4E2A;&#x4E1C;&#x897F;<span class="hljs-tag">&lt;/<span class="hljs-title">dd</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">dd</span>&gt;</span>&#x539F;&#x6765;&#x662F;&#x8FD9;&#x4E2A;&#x4E1C;&#x897F;<span class="hljs-tag">&lt;/<span class="hljs-title">dd</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">dd</span>&gt;</span>&#x539F;&#x6765;&#x662F;&#x8FD9;&#x4E2A;&#x4E1C;&#x897F;<span class="hljs-tag">&lt;/<span class="hljs-title">dd</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">dl</span>&gt;</span>
<span class="hljs-comment">&lt;!--
      &#x81EA;&#x5B9A;&#x4E49;&#x5217;&#x8868;&#xFF1A;
               dt&#xFF1A;&#x8868;&#x793A;&#x5217;&#x8868;&#x7684;&#x6807;&#x9898;
               dd&#xFF1A;&#x8868;&#x793A;&#x5177;&#x4F53;&#x5185;&#x5BB9;&#x90E8;&#x5206;
 --&gt;</span>
</code></pre>
<h4 id="24-&#x8868;&#x683C;table">2.4 &#x8868;&#x683C;table</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">table</span> <span class="hljs-attribute">bgcolor</span>=<span class="hljs-value">&quot;aqua&quot;</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">&quot;center&quot;</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">&quot;300&quot;</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">&quot;1&quot;</span> <span class="hljs-attribute">cellspacing</span>=<span class="hljs-value">&quot;0&quot;</span> <span class="hljs-attribute">cellpadding</span>=<span class="hljs-value">&quot;10&quot;</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-title">tr</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">td</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">&quot;2&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-title">td</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">td</span> <span class="hljs-attribute">rowspan</span>=<span class="hljs-value">&quot;2&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-title">td</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">tr</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">table</span>&gt;</span>
<span class="hljs-comment">&lt;!--
        table
        border:&#x89C4;&#x5B9A;&#x8868;&#x683C;&#x8FB9;&#x6846;&#x7684;&#x539A;&#x5EA6;&#x503C;
        width&#xFF1A;&#x8BBE;&#x7F6E;&#x8868;&#x683C;&#x7684;&#x5BBD;&#x5EA6;&#x503C;
        align&#xFF1A;&#x8BBE;&#x7F6E;&#x8868;&#x683C;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;
        cellspacing&#xFF1A;&#x8BBE;&#x7F6E;&#x5355;&#x5143;&#x683C;&#x95F4;&#x8DDD;
        cellpadding&#xFF1A;&#x8BBE;&#x7F6E;&#x5355;&#x5143;&#x683C;&#x5185;&#x8FB9;&#x8DDD;&#xFF08;&#x6587;&#x5B57;&#x8DDD;&#x79BB;&#x5355;&#x5143;&#x683C;&#x8FB9;&#x6846;&#x7684;&#x8DDD;&#x79BB;
        colspan&#xFF1A;&#x8DE8;&#x884C;
        rowspan&#xFF1A;&#x8DE8;&#x5217;
--&gt;</span>
</code></pre>
<h3 id="&#x7B2C;&#x4E09;&#x8282;&#x97F3;&#x9891;&#x3001;&#x89C6;&#x9891;">&#x7B2C;&#x4E09;&#x8282;&#x97F3;&#x9891;&#x3001;&#x89C6;&#x9891;</h3>
<h4 id="31-&#x97F3;&#x9891;-audio">3.1 &#x97F3;&#x9891; audio</h4>
<pre><code class="lang-html"> <span class="hljs-tag">&lt;<span class="hljs-title">audio</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;media/bgm.mp3&quot;</span> <span class="hljs-attribute">controls</span> <span class="hljs-attribute">autoplay</span> <span class="hljs-attribute">loop</span> <span class="hljs-attribute">preload</span>=<span class="hljs-value">&quot;metadata&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">audio</span>&gt;</span>
  <span class="hljs-comment">&lt;!--
           audio
           src&#x5C5E;&#x6027;&#xFF1A;&#x6307;&#x5B9A;&#x97F3;&#x9891;&#x8D44;&#x6E90;&#x7684;&#x8DEF;&#x5F84;
           control&#x5C5E;&#x6027;&#xFF1A;&#x663E;&#x793A;&#x63A7;&#x5236;&#x9762;&#x677F;&#xFF08;&#x5355;&#x5C5E;&#x6027;&#xFF1A;&#x5C5E;&#x6027;&#x7684;&#x540D;&#x5B57;&#x548C;&#x5C5E;&#x6027;&#x7684;&#x503C;&#x76F8;&#x540C;&#xFF0C;&#x53EF;&#x7B80;&#x5199;&#xFF09;
           autoplay&#xFF1A;&#x81EA;&#x52A8;&#x64AD;&#x653E;
           loop&#xFF1A;&#x5FAA;&#x73AF;&#x64AD;&#x653E;
           preload&#xFF1A;&#x9884;&#x52A0;&#x8F7D;
                 none&#xFF1A;&#x4E0D;&#x8FDB;&#x884C;&#x4EFB;&#x4F55;&#x52A0;&#x8F7D;
                 metadata&#xFF1A;&#x9884;&#x52A0;&#x8F7D;&#x6570;&#x636E;&#x5143;&#x4FE1;&#x606F;
                 auto&#xFF1A;&#x81EA;&#x52A8;&#x9884;&#x52A0;&#x8F7D;
           &#x5173;&#x4E8E;&#x97F3;&#x9891;&#x7684;&#x652F;&#x6301;&#x7A0B;&#x5EA6;
                ogg&#xFF1A;&#x4E00;&#x79CD;&#x65B0;&#x7684;&#x97F3;&#x9891;&#x538B;&#x7F29;&#x683C;&#x5F0F;&#xFF0C;&#x662F;&#x5B8C;&#x5168;&#x514D;&#x8D39;&#x3001;&#x5F00;&#x53D1;&#x548C;&#x6CA1;&#x6709;&#x4E13;&#x5229;&#x9650;&#x5236;&#x7684;&#x3002;
                MP3&#xFF1A;&#x662F;&#x4E00;&#x79CD;&#x97F3;&#x9891;&#x538B;&#x7F29;&#x6280;&#x672F;&#x3002;&#x5B83;&#x88AB;&#x8BBE;&#x8BA1;&#x7528;&#x6765;&#x5927;&#x5E45;&#x5EA6;&#x5730;&#x964D;&#x4F4E;&#x97F3;&#x9891;&#x6570;&#x636E;&#x91CF;&#x3002;
             WAV&#xFF1A;&#x4E3A;&#x5FAE;&#x8F6F;&#x516C;&#x53F8;&#x5F00;&#x53D1;&#x7684;&#x4E00;&#x79CD;&#x58F0;&#x97F3;&#x6587;&#x4EF6;&#x683C;&#x5F0F;&#xFF0C;&#x58F0;&#x97F3;&#x6587;&#x4EF6;&#x8D28;&#x91CF;&#x548C;CD&#x76F8;&#x5DEE;&#x65E0;&#x51E0;&#x3002;
       --&gt;</span>
</code></pre>
<h4 id="32-&#x89C6;&#x9891;video">3.2 &#x89C6;&#x9891;video</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">video</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">&quot;800&quot;</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">&quot;&quot;</span>  &gt;</span>
           <span class="hljs-tag">&lt;<span class="hljs-title">source</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;myvideo&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;video/mp4&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">source</span>&gt;</span>
           <span class="hljs-tag">&lt;<span class="hljs-title">source</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;myvideo.ogv&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;video/ogg&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">source</span>&gt;</span>
           <span class="hljs-tag">&lt;<span class="hljs-title">source</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;myvideo.webm&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;video/webm&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">source</span>&gt;</span>
           <span class="hljs-tag">&lt;<span class="hljs-title">object</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;application/x-shockwave-flash&quot;</span> <span class="hljs-attribute">data</span>=<span class="hljs-value">&quot;myvideo.swf&quot;</span>&gt;</span>
               <span class="hljs-tag">&lt;<span class="hljs-title">param</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;movie&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;myvideo.swf&quot;</span> /&gt;</span>
               <span class="hljs-tag">&lt;<span class="hljs-title">param</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;flashvars&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;autostart=true&amp;amp;file=myvideo.swf&quot;</span> /&gt;</span>
           <span class="hljs-tag">&lt;/<span class="hljs-title">object</span>&gt;</span>
           &#x5F53;&#x524D;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x652F;&#x6301; video&#x76F4;&#x63A5;&#x64AD;&#x653E;&#xFF0C;&#x70B9;&#x51FB;&#x8FD9;&#x91CC;&#x4E0B;&#x8F7D;&#x89C6;&#x9891;&#xFF1A; <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;myvideo.webm&quot;</span>&gt;</span>&#x4E0B;&#x8F7D;&#x89C6;&#x9891;<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">video</span>&gt;</span>
<span class="hljs-comment">&lt;!--
        video&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#xFF1A;
            vp8&#xFF1A;Opera FF safari
            h264&#xFF1A;IE9+ Chrome Safari
            ie678&#xFF1A;

--&gt;</span>
</code></pre>
<p>&#x6807;&#x7B7E;&#x5E38;&#x7528;&#x5C5E;&#x6027;&#xFF1A;  </p>
<table>

<pre><code>&lt;tr align=&quot;center&quot;&gt;
    &lt;td&gt;&#x5C5E;&#x6027;&lt;/td&gt;
    &lt;td&gt;&#x503C;&lt;/td&gt;
    &lt;td&gt;&#x8BF4;&#x660E;&lt;/td&gt;                       
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;autoplay&lt;/td&gt;
    &lt;td&gt;autoplay&lt;/td&gt;
    &lt;td&gt;&#x5982;&#x679C;&#x51FA;&#x73B0;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x97F3;&#x9891;&#x5728;&#x5C31;&#x7EEA;&#x540E;&#x9A6C;&#x4E0A;&#x64AD;&#x653E;&#x3002;&lt;/td&gt;                       
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;controls&lt;/td&gt;
    &lt;td&gt;controls&lt;/td&gt;
    &lt;td&gt;&#x5982;&#x679C;&#x51FA;&#x73B0;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x5411;&#x7528;&#x6237;&#x663E;&#x793A;&#x63A7;&#x4EF6;&#xFF0C;&#x6BD4;&#x5982;&#x64AD;&#x653E;&#x6309;&#x94AE;&#x3002;&lt;/td&gt;                       
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;loop&lt;/td&gt;
    &lt;td&gt;loop&lt;/td&gt;
    &lt;td&gt;&#x5982;&#x679C;&#x51FA;&#x73B0;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x6BCF;&#x5F53;&#x97F3;&#x9891;&#x7ED3;&#x675F;&#x65F6;&#x91CD;&#x65B0;&#x5F00;&#x59CB;&#x64AD;&#x653E;&#x3002;&lt;/td&gt;                       
&lt;/tr&gt;  
&lt;tr&gt;
    &lt;td&gt;preload&lt;/td&gt;
    &lt;td&gt;preload    &lt;/td&gt;
    &lt;td&gt;&#x5982;&#x679C;&#x51FA;&#x73B0;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x97F3;&#x9891;&#x5728;&#x9875;&#x9762;&#x52A0;&#x8F7D;&#x65F6;&#x8FDB;&#x884C;&#x52A0;&#x8F7D;&#xFF0C;&#x5E76;&#x9884;&#x5907;&#x64AD;&#x653E;&#x3002;&#x5982;&#x679C;&#x4F7F;&#x7528; &quot;autoplay&quot;&#xFF0C;&#x5219;&#x5FFD;&#x7565;&#x8BE5;&#x5C5E;&#x6027;&#x3002;&lt;/td&gt;                       
&lt;/tr&gt;  
 &lt;tr&gt;
    &lt;td&gt;src&lt;/td&gt;
    &lt;td&gt;url&lt;/td&gt;
    &lt;td&gt;&#x8981;&#x64AD;&#x653E;&#x7684;&#x97F3;&#x9891;&#x7684; URL&lt;/td&gt;                       
&lt;/tr&gt;                           
</code></pre><p> &lt;/table&gt;</p>
<h4 id="33-&#x9884;&#x5904;&#x7406;&#x6807;&#x7B7E;-pre">3.3 &#x9884;&#x5904;&#x7406;&#x6807;&#x7B7E; pre</h4>
<pre><code class="lang-html">    <span class="hljs-tag">&lt;<span class="hljs-title">pre</span>&gt;</span>
        &#x5E8A;&#x524D;&#x660E;&#x6708;&#x5149;&#xFF0C;
        &#x7591;&#x662F;&#x5730;&#x4E0A;&#x971C;&#x3002;
        &#x4E3E;&#x5934;&#x671B;&#x660E;&#x6708;&#xFF0C;
        &#x4F4E;&#x5934;&#x601D;&#x6545;&#x4E61;&#x3002;
    <span class="hljs-tag">&lt;/<span class="hljs-title">pre</span>&gt;</span>
<span class="hljs-comment">&lt;!--&#x539F;&#x6837;&#x8F93;&#x5165;&#x5185;&#x5BB9;--&gt;</span>
</code></pre>
<h4 id="34-html5&#x5141;&#x8BB8;&#x7528;&#x6237;&#x81EA;&#x5B9A;&#x4E49;&#x6807;&#x7B7E;">3.4 HTML5&#x5141;&#x8BB8;&#x7528;&#x6237;&#x81EA;&#x5B9A;&#x4E49;&#x6807;&#x7B7E;</h4>
<h5 id="&#x5B9E;&#x4F53;&#x5B57;&#x7B26;">&#x5B9E;&#x4F53;&#x5B57;&#x7B26;</h5>
<pre><code class="lang-html">&#x5B9E;&#x4F53;&#x5B57;&#x7B26;
            <span class="hljs-tag">&lt;   &amp;<span class="hljs-attribute">amp</span>;<span class="hljs-attribute">lt</span>;
            &gt;</span>   &amp;amp;gt;
            &quot;  &amp;amp;quot;
            &#x7A7A;&#x683C;    &amp;amp;nbsp;
            &amp;   &amp;amp;amp;
            &#x5546;&#x6807;&amp;reg;    &amp;amp;reg;
            &#x7248;&#x6743;&amp;copy;   &amp;amp;copy;
</code></pre>
<h3 id="35-&#x56FE;&#x7247;&#x70ED;&#x533A;map">3.5 &#x56FE;&#x7247;&#x70ED;&#x533A;map</h3>
<pre><code class="lang-html">        <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;img/QQ&#x56FE;&#x7247;20170831114944.jpg&quot;</span> <span class="hljs-attribute">usemap</span>=<span class="hljs-value">&quot;#mapName&quot;</span>/&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">map</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;mapName&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">area</span> <span class="hljs-attribute">shape</span>=<span class="hljs-value">&quot;rect&quot;</span> <span class="hljs-attribute">coords</span>=<span class="hljs-value">&quot;256,35,395,210&quot;</span> 
                    <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">target</span>=<span class="hljs-value">&quot;_blank&quot;</span>/&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">area</span> <span class="hljs-attribute">shape</span>=<span class="hljs-value">&quot;circle&quot;</span> <span class="hljs-attribute">coords</span>=<span class="hljs-value">&quot;265,336,20&quot;</span> 
                    <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;test/test1.html&quot;</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">target</span>=<span class="hljs-value">&quot;_blank&quot;</span>/&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">area</span> <span class="hljs-attribute">shape</span>=<span class="hljs-value">&quot;poly&quot;</span> <span class="hljs-attribute">coords</span>=<span class="hljs-value">&quot;234,495,410,497,315,615&quot;</span> 
                    <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;img/qi.jpg&quot;</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">target</span>=<span class="hljs-value">&quot;_blank&quot;</span>/&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">map</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-comment">&lt;!--
                map&#x7684;&#x8BBE;&#x7F6E;
                   &#x5B50;&#x6807;&#x7B7E;area&#x5B9A;&#x4E49;&#x4E86;&#x70B9;&#x51FB;&#x533A;&#x57DF;
                     area&#x4E2D;&#x7684;shape&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x4E86;&#x533A;&#x57DF;&#x7684;&#x5F62;&#x72B6;
                         rect&#xFF1A;&#x77E9;&#x5F62;
                         circle:&#x5706;&#x5F62;
                         poly&#xFF1A;&#x591A;&#x8FB9;&#x5F62;
                     area&#x4E2D;&#x7684;coords&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x4E86;&#x70B9;&#x7684;&#x5750;&#x6807;
                         rect&#x65F6;&#x4F20;&#x5165;&#x56DB;&#x4E2A;&#x503C;&#xFF0C;&#x5206;&#x522B;&#x4F4D;&#x77E9;&#x5F62;&#x7684;&#x5DE6;&#x4E0A;&#x89D2;&#x548C;&#x53F3;&#x4E0B;&#x89D2;&#x7684;&#x5750;&#x6807;
                         circle&#x65F6;&#x4F20;&#x5165;&#x4E09;&#x4E2A;&#x503C;&#xFF0C;&#x524D;&#x4E24;&#x4E2A;&#x503C;&#x4E3A;&#x5706;&#x5FC3;&#x5750;&#x6807;&#xFF0C;&#x7B2C;&#x4E09;&#x4E2A;&#x503C;&#x4E3A;&#x534A;&#x5F84;&#x5927;&#x5C0F;
                         poly&#x662F;&#x4F9D;&#x6B21;&#x4F20;&#x5165;&#x591A;&#x8FB9;&#x5F62;&#x7684;&#x5750;&#x6807;&#x70B9;&#x5373;&#x53EF;
--&gt;</span>
</code></pre>
<h3 id="&#x7B2C;&#x56DB;&#x8282;&#x8868;&#x5355;&#x5143;&#x7D20;">&#x7B2C;&#x56DB;&#x8282;&#x8868;&#x5355;&#x5143;&#x7D20;</h3>
<h4 id="41-form&#x6807;&#x7B7E;">4.1 form&#x6807;&#x7B7E;</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">form</span> <span class="hljs-attribute">action</span>=<span class="hljs-value">&quot;welcome.php&quot;</span> <span class="hljs-attribute">method</span>=<span class="hljs-value">&quot;post&quot;</span> <span class="hljs-attribute">enctype</span>=<span class="hljs-value">&quot;multipart/form-data&quot;</span>&gt;</span>
                &#x59D3;&#x540D;&#xFF1A;<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;name_&quot;</span>  <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">&quot;&#x8BF7;&#x8F93;&#x5165;&#x59D3;&#x540D;&quot;</span>
                     <span class="hljs-attribute">autocomplete</span>=<span class="hljs-value">&quot;on&quot;</span> <span class="hljs-attribute">required</span>/&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
                &#x5BC6;&#x7801;&#xFF1A;<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;password&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;psd&quot;</span>/&gt;</span>
                     <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
                     &#x7231;&#x597D;&#xFF1A;
                    <span class="hljs-tag">&lt;<span class="hljs-title">label</span> &gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span>  /&gt;</span>&#x7537;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">label</span> &gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span>  /&gt;</span>&#x6572;&#x4EE3;&#x7801;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;test&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span>  /&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">&quot;test&quot;</span>&gt;</span>&#x4FEF;&#x5367;&#x6491;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>

                <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
                &#x6027;&#x522B;&#xFF1A;
                 <span class="hljs-tag">&lt;<span class="hljs-title">label</span> &gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;sex&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;0&quot;</span> /&gt;</span>&#x7537;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
                 <span class="hljs-tag">&lt;<span class="hljs-title">label</span> &gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;sex&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;1&quot;</span> /&gt;</span>&#x5973;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;file&quot;</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;color&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;color&quot;</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;date&quot;</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;range&quot;</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;submit&quot;</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;button&quot;</span>  <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x6309;&#x94AE;&quot;</span>/&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;reset&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span>
<span class="hljs-comment">&lt;!--
                &#x8868;&#x5355;&#x53CA;&#x8868;&#x5355;&#x5143;&#x7D20;
                action&#x5C5E;&#x6027;&#xFF1A;&#x5B9A;&#x4E49;&#x4E86;&#x8868;&#x5355;&#x63D0;&#x4EA4;&#x5730;&#x5740;
                method&#x5C5E;&#x6027;&#xFF1A;&#x5B9A;&#x4E49;&#x4E86;&#x63D0;&#x4EA4;&#x65B9;&#x5F0F;
                   novalidate    &#x5982;&#x679C;&#x4F7F;&#x7528;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x63D0;&#x4EA4;&#x8868;&#x5355;&#x65F6;&#x4E0D;&#x8FDB;&#x884C;&#x9A8C;&#x8BC1;
                    get&#x65B9;&#x5F0F;&#x53EF;&#x4EE5;&#x628A;&#x63D0;&#x4EA4;&#x7684;data&#x6570;&#x636E;&#x901A;&#x8FC7;&#xFF1F;&#x53F7;&#x62FC;&#x63A5;&#x5230;url&#x540E;&#x9762;&#xFF0C; post&#x5219;&#x662F;&#x628A;&#x6570;&#x636E;&#x4FE1;&#x606F;&#x5C01;&#x88C5;&#x5230;&#x8BF7;&#x6C42;&#x5934;&#x91CC;&#x9762;&#x3002;
                             &#x5982;&#x679C;&#x662F;&#x8981;&#x63D0;&#x4EA4;&#x5BC6;&#x7801;&#x7B49;&#x654F;&#x611F;&#x4FE1;&#x606F;&#xFF0C;&#x4E0D;&#x53EF;&#x4EE5;&#x7528;get&#x65B9;&#x5F0F;get&#x5728;&#x5B58;&#x4E66;&#x7B7E;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x662F;&#x6BD4;&#x8F83;&#x65B9;&#x4FBF;&#x7684;&#x3002;
                    get&#x63D0;&#x4EA4;&#x7684;&#x6570;&#x636E;&#x91CF;&#x6BD4;&#x8F83;&#x5C0F;&#xFF0C;&#x4E00;&#x822C;&#x4E0D;&#x8D85;&#x8FC7;2000&#x4E2A;&#x5B57;&#x8282;&#xFF0C;post&#x6CA1;&#x6709;&#x9650;&#x5236;

                    post&#x63D0;&#x4EA4;&#x65B9;&#x5F0F;&#x56E0;&#x4E3A;&#x5C01;&#x88C5;&#x5728;&#x8BF7;&#x6C42;&#x5934;&#x91CC;&#xFF0C;&#x76F8;&#x5BF9;&#x6BD4;&#x8F83;&#x5B89;&#x5168;

                    enctype&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x4E86;&#x8868;&#x5355;&#x63D0;&#x4EA4;&#x524D;&#x8FDB;&#x884C;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x5904;&#x7406;&#x7684;&#x65B9;&#x5F0F;   

                &#x5982;&#x679C;&#x8981;&#x63D0;&#x4EA4;&#x6587;&#x4EF6;&#xFF0C;&#x90A3;&#x4E48;enctype&#x7684;&#x503C;&#x5FC5;&#x987B;&#x4E3A;multipart/form-data&#xFF0C;
                &#x63D0;&#x4EA4;&#x65B9;&#x5F0F;&#x4E3A;post
                    placeholder&#xFF1A;&#x5360;&#x4F4D;&#x7B26;
                    required&#xFF1A;&#x63D0;&#x793A;&#x6846;
                    ----------------------------
                    autofocus    &#x89C4;&#x5B9A;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x5728;&#x9875;&#x9762;&#x52A0;&#x8F7D;&#x65F6;&#x662F;&#x5426;&#x83B7;&#x5F97;&#x7126;&#x70B9;&#x3002;
                contenteditable  &#x53EF;&#x7F16;&#x8F91;
                textarea  &#x6587;&#x672C;&#x57DF;
                footer  &#x9875;&#x811A;
--&gt;</span>
<span class="hljs-comment">&lt;!--

                &#x8868;&#x5355;&#x5143;&#x7D20;
                   input type=&#x201C;test&#x201D;      &#x6587;&#x672C;&#x7C7B;&#x578B;
                         type=&#x201C;CheckBox&#x201D;  &#x590D;&#x9009;&#x6846;
                         type=&#x201C;radio&#x201D;     &#x5355;&#x9009;&#x6846;
                         type=&#x201C;submit&#x201D;    &#x63D0;&#x4EA4;&#x8868;&#x5355;&#x6309;&#x94AE;
                         type=&#x201C;button&#x201D;    &#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x529F;&#x80FD;&#x7684;&#x6309;&#x94AE;
                         type=&#x201C;reset&#x201D;     &#x91CD;&#x7F6E;&#x8868;&#x5355;
--&gt;</span>
</code></pre>
<h4 id="42-&#x6587;&#x672C;&#x57DF;">4.2 &#x6587;&#x672C;&#x57DF;</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">textarea</span> <span class="hljs-attribute">maxlength</span>=<span class="hljs-value">&quot;10&quot;</span><span class="hljs-value">name=&quot;perIntro&quot;</span> <span class="hljs-attribute">rows</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">cols</span>=<span class="hljs-value">&quot; &quot;</span> &gt;</span>
<span class="hljs-comment">&lt;!--
               &#x6587;&#x672C;&#x57DF;
                  autofocus&#x5C5E;&#x6027;&#xFF1A;   &#x81EA;&#x52A8;&#x805A;&#x7126;&#xFF0C;&#x5982;&#x679C;&#x4E0A;&#x6587;&#x5DF2;&#x7ECF;&#x6709;&#x5176;&#x4ED6;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E86;&#x6B64;&#x5C5E;&#x6027;&#xFF0C;
                             &#x90A3;&#x4E48;&#x540E;&#x9762;&#x7684;autofocus&#x5C5E;&#x6027;&#x5931;&#x6548;
                   readonly&#xFF1A;    &#x53EA;&#x8BFB;
           --&gt;</span>
</code></pre>
<h4 id="43-frame">4.3 frame</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">iframe</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">&quot;600&quot;</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">&quot;300&quot;</span>&gt;</span>djf<span class="hljs-tag">&lt;/<span class="hljs-title">iframe</span>&gt;</span>
<span class="hljs-comment">&lt;!--
    &#x5185;&#x5D4C;&#x5143;&#x7D20;
           --&gt;</span>
</code></pre>
<h4 id="44-ruby">4.4 ruby</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">ruby</span>&gt;</span>
    &#x597D;<span class="hljs-tag">&lt;<span class="hljs-title">rt</span>&gt;</span>hao<span class="hljs-tag">&lt;/<span class="hljs-title">rt</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ruby</span>&gt;</span>
<span class="hljs-comment">&lt;!--
   ruby rt &#x5B57;&#x4F53;&#xFF0C;&#x62FC;&#x97F3;
           --&gt;</span>
</code></pre>
<h4 id="45-datalist">4.5 datalist</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">list</span>=<span class="hljs-value">&quot;cars&quot;</span>  /&gt;</span> 
<span class="hljs-tag">&lt;<span class="hljs-title">datalist</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;cars&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot; &#x96F7;&#x514B;&#x8428;&#x65AF;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x4FDD;&#x65F6;&#x6377;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x5170;&#x535A;&#x57FA;&#x5C3C;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x5954;&#x9A70;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x7EA2;&#x65D7;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x739B;&#x838E;&#x62C9;&#x8482;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x798F;&#x7279;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">datalist</span>&gt;</span>
<span class="hljs-comment">&lt;!--
   &#x5B9A;&#x4E49;&#x548C;&#x7528;&#x6CD5;
&lt;datalist&gt; &#x6807;&#x7B7E;&#x5B9A;&#x4E49;&#x9009;&#x9879;&#x5217;&#x8868;&#x3002;&#x8BF7;&#x4E0E; input &#x5143;&#x7D20;&#x914D;&#x5408;&#x4F7F;&#x7528;&#x8BE5;&#x5143;&#x7D20;&#xFF0C;&#x6765;&#x5B9A;&#x4E49; input &#x53EF;&#x80FD;&#x7684;&#x503C;&#x3002;
datalist &#x53CA;&#x5176;&#x9009;&#x9879;&#x4E0D;&#x4F1A;&#x88AB;&#x663E;&#x793A;&#x51FA;&#x6765;&#xFF0C;&#x5B83;&#x4EC5;&#x4EC5;&#x662F;&#x5408;&#x6CD5;&#x7684;&#x8F93;&#x5165;&#x503C;&#x5217;&#x8868;&#x3002;
&#x8BF7;&#x4F7F;&#x7528; input &#x5143;&#x7D20;&#x7684; list &#x5C5E;&#x6027;&#x6765;&#x7ED1;&#x5B9A; datalist&#x3002;
           --&gt;</span>
</code></pre>
<h4 id="46-details">4.6 details</h4>
<pre><code class="lang-html">            <span class="hljs-tag">&lt;<span class="hljs-title">details</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">summary</span>&gt;</span>&#x8D37;&#x6B3E;&#x4EBA;&#x534E;&#x5DE5;&#x79D1;&#x6280;&#x65F6;&#x523B;&#x53D1;&#x6325;<span class="hljs-tag">&lt;/<span class="hljs-title">summary</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>&#x8D37;&#x6B3E;&#x4EBA;&#x534E;&#x5DE5;&#x79D1;&#x6280;&#x65F6;&#x523B;&#x53D1;&#x6325;<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>&#x8D37;&#x6B3E;&#x4EBA;&#x534E;&#x5DE5;&#x79D1;&#x6280;&#x65F6;&#x523B;&#x53D1;&#x6325;<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>&#x8D37;&#x6B3E;&#x4EBA;&#x534E;&#x5DE5;&#x79D1;&#x6280;&#x65F6;&#x523B;&#x53D1;&#x6325;<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">details</span>&gt;</span>
&#x6CE8;&#xFF1A;&#x4E0E; <span class="hljs-tag">&lt;<span class="hljs-title">summary</span>&gt;</span> &#x6807;&#x7B7E; &#x914D;&#x5408;&#x4F7F;&#x7528;&#x53EF;&#x4EE5;&#x4E3A; details &#x5B9A;&#x4E49;&#x6807;&#x9898;&#x3002;&#x6807;&#x9898;&#x662F;&#x53EF;&#x89C1;&#x7684;&#xFF0C;&#x7528;&#x6237;&#x70B9;&#x51FB;&#x6807;&#x9898;&#x65F6;&#xFF0C;&#x4F1A;&#x663E;&#x793A;&#x51FA; details&#x3002;
</code></pre>
<h4 id="47-select">4.7 select</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">select</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">&quot;&#x5E7F;&#x5DDE;&#x5404;&#x533A;&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;th&quot;</span>&gt;</span>&#x5929;&#x6CB3;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;yx&quot;</span>&gt;</span>&#x8D8A;&#x79C0;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;py&quot;</span>&gt;</span>&#x756A;&#x79BA;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">selected</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;by&quot;</span>&gt;</span>&#x767D;&#x4E91;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">optgroup</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">optgroup</span> <span class="hljs-attribute">label</span>=<span class="hljs-value">&quot;&#x5E7F;&#x4E1C;&#x5404;&#x5E02;&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;gz&quot;</span>&gt;</span>&#x5E7F;&#x5DDE;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;sz&quot;</span>&gt;</span>&#x6DF1;&#x5733;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;zh&quot;</span>&gt;</span>&#x73E0;&#x6D77;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">disabled</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;zs&quot;</span>&gt;</span>&#x4E2D;&#x5C71;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">optgroup</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span>
<span class="hljs-comment">&lt;!--
                select &#x8868;&#x793A;&#x4E00;&#x4E2A;&#x4E0B;&#x62C9;&#x5217;&#x8868;
                   option&#xFF1A;&#x5B50;&#x5143;&#x7D20;&#xFF0C;&#x8868;&#x793A;&#x5217;&#x8868;&#x7684;&#x5177;&#x4F53;&#x9009;&#x9879;
                   option&#x7684;selected&#x5C5E;&#x6027;&#x8868;&#x793A;&#x9ED8;&#x8BA4;&#x9009;&#x4E2D;&#x72B6;&#x6001;
                   optgroup&#xFF1A; optiond&#x7684;&#x7EC4;&#x540D;
                   disabled &#x4E0D;&#x53EF;&#x9009;
 --&gt;</span>
</code></pre>
<h4 id="48-mark">4.8 mark</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Do not forget to buy <span class="hljs-tag">&lt;<span class="hljs-title">mark</span>&gt;</span>milk<span class="hljs-tag">&lt;/<span class="hljs-title">mark</span>&gt;</span> today.<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">mark</span>&gt;</span> &#x6807;&#x7B7E;&#x5B9A;&#x4E49;&#x5E26;&#x6709;&#x8BB0;&#x53F7;&#x7684;&#x6587;&#x672C;&#x3002;&#x8BF7;&#x5728;&#x9700;&#x8981;&#x7A81;&#x51FA;&#x663E;&#x793A;&#x6587;&#x672C;&#x65F6;&#x4F7F;&#x7528; <span class="hljs-tag">&lt;<span class="hljs-title">m</span>&gt;</span> &#x6807;&#x7B7E;&#x3002;
</code></pre>
<h3 id="&#x7B2C;&#x4E94;&#x8282;html5&#x7684;&#x65B0;&#x589E;&#x7279;&#x6027;">&#x7B2C;&#x4E94;&#x8282;HTML5&#x7684;&#x65B0;&#x589E;&#x7279;&#x6027;</h3>
<h4 id="51-html5&#x7684;&#x65B0;&#x7279;&#x6027;&#x4ECB;&#x7ECD;">5.1 HTML5&#x7684;&#x65B0;&#x7279;&#x6027;&#x4ECB;&#x7ECD;</h4>
<ul>
<li><p>&#x65B0;&#x7684;&#x6587;&#x6863;&#x58F0;&#x660E;&#x5934;</p>
<p>  &lt;!DOCTYPE HTML&gt;</p>
</li>
<li><p>&#x8BED;&#x4E49;&#x5316;&#x6807;&#x7B7E;  </p>
<pre><code>  header  
  footer  
  nav  
  aside  
  article  
  section  
</code></pre></li>
<li><p>&#x97F3;&#x9891;&#x89C6;&#x9891;&#x7684;&#x5F15;&#x5165;</p>
</li>
<li><p>&#x672C;&#x5730;&#x5B58;&#x50A8;</p>
</li>
<li><p>canvas</p>
</li>
<li><p>input &#x65B0;&#x7C7B;&#x578B;&#x7684;&#x5F15;&#x5165;</p>
</li>
<li><p>mark &#x6807;&#x8BB0;&#x5143;&#x7D20;</p>
</li>
<li><p>&#x62D6;&#x62FD;&#x91CA;&#x653E; &#xFF08;drag and drop&#xFF09;</p>
</li>
<li><p>&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;</p>
</li>
</ul>
</table>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../index.html" class="navigation navigation-prev " aria-label="Previous page: Introduction"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../md/css/CSS笔记.html" class="navigation navigation-next " aria-label="Next page: css笔记"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-expandable-chapters-interactive/expandable-chapters.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"expandable-chapters-interactive":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
